<template>
    <el-drawer v-model="isShow" :title="title" :destroy-on-close="true" size="50%" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>

        <el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="服装装备" required prop="clothingId">
                        <el-select v-model="form.clothingId">
                            <el-option v-for="item in ClothingList" :key="item.clothing_id" :label="item.name"
                                :value="item.clothing_id" @click.native="clothingClick(item)" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">

                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="计量单位" required prop="jiliangdanwei">
                        <el-select v-model="form.jiliangdanwei" clearable :disabled="true">
                            <el-option v-for="item in nj_jiliangdanwei" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="有效期（年）" required prop="youxiaoqi">
                        <el-input v-model="form.youxiaoqi" placeholder="有效期（年）" disabled="true" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="服装装备备注">
                        <el-input v-model="form.remark" placeholder="" disabled="true" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider class="mt-0" />
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="发放日期" required>
                        <el-date-picker v-model="form.senddate" type="data" placeholder="请选发放日期" style="width: 100%;"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="接受人" required prop="roomcode">
                        <el-select v-model="form.policeareaId">
                            <el-option v-for="item in PoliceAreaList" :key="item.policeareaId" :label="item.areaname"
                                :value="item.policeareaId" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="发放备注">
                        <el-input v-model="form.roomcode" placeholder="" />
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="状态" required>
                        <el-radio-group v-model="form.state">
                            <el-radio v-for="(item, index) in sys_normal_disable" :key="'state' + index"
                                :value="item.value">{{
                                    item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row> -->
        </el-form>
        <!-- <el-table :data="tableData" v-loading="loading">            
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="unitname" label="单位" />
            <el-table-column prop="depId" label="部门" />
            <el-table-column prop="num" label="数量">
                 <template slot-scope="scope">
                    <el-form-item  >
                        <el-input v-model="scope.row.name" maxlength="200">
                        </el-input>
                    </el-form-item>
                </template>     
            </el-table-column>
        </el-table>-->
        <template #footer>
            <!-- <el-button type="primary" @click="submitHandle(1)" v-show="showfabu">发布</el-button>
            <el-button type="primary" @click="submitHandle(0)" v-show="showfabu">草稿</el-button> -->
            <el-button @click="cancel">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { createRoom, editRoom, getRoomInfo, getRoomTypeList } from "@/api/Room/room";
import { listDept, } from "@/api/system/dept";
import { getUserProfile } from "@/api/system/user";
import { getClothingList, getClothingInfo } from "@/api/ParameterSetting/Clothing";

const { proxy } = getCurrentInstance()
const { sys_normal_disable, nj_jiliangdanwei } = proxy.useDict('sys_normal_disable', 'nj_jiliangdanwei')

// 是否显示抽屉
const isShow = ref(false)
// 抽屉标题
const title = ref('')
// 部门
const department = ref([])
// 所属单位
const deptOptions = ref([]);
// 服装装备
const ClothingList = ref([]);
// 房间类型
const RoomTypeList = ref([]);
// 通知事件
const emit = defineEmits(['getRoomList'])

const queryParams = ref({
    status: undefined,
})
const tableData = ref([])
const rules = {
    // roomcode: [{ required: true, message: "房间编号不能为空", trigger: "blur" }],
    // roomname: [{ required: true, message: "房间名称不能为空", trigger: "blur" }],
    // unitId: [{ required: true, message: "所属单位不能为空", trigger: "blur" }],
    // policeareaId: [{ required: true, message: "所在警务区不能为空", trigger: "blur" }],
    // roomtypeId: [{ required: true, message: "房间类别不能为空", trigger: "blur" }]
}

// 发放
const form = ref({
    clothingId: undefined,
    clothName: undefined,
    sendremark: undefined,
    receiveuserId: undefined,
    alertdays: undefined,
    youxiaoqi: undefined,
    qtyci: undefined,
    jiiangdanwei: undefined,
    unitId: undefined,
    senduserId: undefined,
    senddate: undefined,
    // state: '0',
})

const changeShowStatus = () => {
    isShow.value = !isShow.value
}
// const isButtonDisabled = ref(false);

// 获取个人信息
const getUserInfo = async () => {
    await getUserProfile().then(res => {
        form.value.unitId = res.data.deptId
    })
}

// 添加服装装备发放
const showAddDrawer = () => {
    title.value = '添加服装装备发放';
    reset();
    getClothingLists()
    changeShowStatus()
}

// 修改服装装备发放 
const showEditDrawer = async (data) => {
    title.value = '修改服装装备发放'
    // isButtonDisabled.value = true;
    await getRoomInfo(data.roomId).then(res => {
        // console.log(res.data.policeareaId)
        form.value = res.data
        form.value.unitId = Number(res.data.unitId)
        // console.log(res.data.policeareaId,'房间详情的policeareaId')

        const Params = {
            unitId: form.value.unitId
        }
        // console.log(Params)
        getPoliceAreaList(Params).then(res => {
            PoliceAreaList.value = res.rows
            // console.log(res,"警务区列表")
        })

    })

    await listDept(deptqueryParams.value).then(res => {
        deptOptions.value = res.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
    })
    changeShowStatus()
}
defineExpose({ showAddDrawer, showEditDrawer })


// 表格属性
const paging = ref({
    pageNum: 1,// 页码
    pageSize: 9999// 分页数量
})

// 获取服装装备列表
const getClothingLists = async () => {
    await getClothingList(queryParams.value).then(res => {
        // console.log(res.rows)       
        ClothingList.value = res.rows
        // console.log(ClothingList.value)
    })
   
    // tableData.value = [{
    //     name: '王小虎',
    //     unitname: '上海市普陀区金沙江路 1518 弄'
    // }, {
    //     name: '王小虎',
    //     unitname: '上海市普陀区金沙江路 1517 弄'
    // }, {
    //     name: '王小虎',
    //     unitname: '上海市普陀区金沙江路 1519 弄'
    // }, {
    //     name: '王小虎',
    //     unitname: '上海市普陀区金沙江路 1516 弄'
    // }]



}

// 获取服装装备详细
const getClothingInfos = async (data) => {
    await getClothingInfo(data.clothing_id).then(res => {
        // console.log(data)
        form.value.jiliangdanwei = res.data.jiliangdanwei;
        form.value.youxiaoqi = res.data.youxiaoqi;
        form.value.remark = res.data.remark;
        // console.log(form.value);
    })
}


/** 节点单击事件 */
function clothingClick(data) {
    // console.log(data)
    getClothingInfos(data);
};

onMounted(() => {
    getUserInfo()
})
const submitHandle = () => {
    // 必输校验--标签<el-form :model="form" label-width="auto" ref="formRef"  :rules="rules"> 添加ref="formRef" 属性 :rules="rules"绑定
    // 然后const rules = {里面是需要的rules}   在每个<el-form-item label="房间编号" required prop="对应字段">加上 prop="对应的字段"
    // submitHandle的时候先判断    proxy.$refs["formRef"].validate(valid => {
    // if (valid) {  valid true面执行具体代码逻辑     });}

    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value['roomId']) {
                editRoom(form.value).then(res => {
                    changeShowStatus()
                    emit('getRoomList', '来了老弟')
                })
            } else {
                createRoom(form.value).then(res => {
                    changeShowStatus()
                    emit('getRoomList', '来了老弟')
                })
            }
        }

    });
}


// 关闭后的回调事件
const closeHandle = () => {
    reset()
}
/** 重置操作表单 */
function reset() {
    form.value = {
        clothingId: undefined,
        clothName: undefined,
        sendremark: undefined,
        receiveuserId: undefined,
        alertdays: undefined,
        youxiaoqi: undefined,
        qtyci: undefined,
        jiiangdanwei: undefined,
        unitId: undefined,
        senduserId: undefined,
        senddate: undefined,
        // state: '0',
    };
    proxy.resetForm("formRef");
};
/** 取消按钮 */
const cancel = () => {
    isShow.value = false
    reset();
}
</script>

<style lang="scss" scoped>
h4 {
    margin: 10px 0;
}
</style>